<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>01 HtmlTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="../dist/XType.js"></script>
    <script>
        // 创建管理器
        var UI = new XType.Manager();

        // 自定义控件
        function Div(options = {}) {
            XType.Control.call(this, options);
        }

        Div.prototype = Object.create(XType.Control.prototype);
        Div.prototype.constructor = Div;

        Div.prototype.render = function () {
            var dom = this.createElement('div');
            this.renderDom(dom);
        };

        // 注册xtype
        UI.addXType('div', Div);

        // 渲染自定义控件
        var control = UI.create({
            xtype: 'div',
            id: 'div1',
            parent: document.body,
            style: {
                width: '100px',
                height: '100px',
                backgroundColor: '#f00'
            },
            listeners: {
                click: () => {
                    alert('You clicked!');
                }
            }
        });
        control.render();
    </script>
</body>

</html>